import  React from 'react'


//视图组件 

//引入 connect 连接 把 Provider 包装的组件跟我们需要展示的组件连接起来
import {connect} from 'react-redux'


import  List from './List'


class App extends React.Component {
  

    componentDidMount() {
        console.log(this.props)
    }

    myAdd=()=>{
        // alert('xxxx 加加')
        this.props.myjiajia()
    }

    myunAdd=()=>{
        // alert('xxxx 减减')
        this.props. myjianjian()
       
    }

    aaa=()=>{
        console.log('aaaa')
    }
    render() {
        return(
            <div>
                <h2>App</h2>
                <div>{this.props.counter}</div>

                <button onClick={this.myAdd}>点击++</button>

                <button onClick={this.myunAdd}>点击--</button>


                <List data={'hello redux'}  xxx={()=>this.aaa()}></List>
            </div>
        )
    }
}



/*

'第一个参数就是映射的属性值','第二个参数是映射的方法'  顺序不能对调  

 export  default    connect('第一个参数就是映射的属性值','第二个参数是映射的方法')(App)
*/


// 映射属性
const mapStateToProps=(state)=>{


    return {
        counter:state,
        msg:'张三真帅'
    }
}

//映射的方法
const mapDispatchToProps=(dispatch)=>{

    return {
        myjiajia:()=>dispatch({type:'ADD'}),
        myjianjian:()=>dispatch({type:'UNADD'})
    }

}


export  default    connect(mapStateToProps,mapDispatchToProps)(App)
